import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget {
  const ContainerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Container组件详解')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildBasicUsage(),
          const SizedBox(height: 16),
          _buildAlignmentDemo(),
          const SizedBox(height: 16),
          _buildDecorationDemo(),
          const SizedBox(height: 16),
          _buildPaddingMarginCompare(),
          const SizedBox(height: 16),
          _buildConstraintsDemo(),
        ],
      ),
    );
  }

  Widget _buildBasicUsage() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 200,
              height: 100,
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('基础容器', style: TextStyle(color: Colors.white)),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8),
              child: Text(
                '基础属性配置：• width: 200 • height: 100 • color: Colors.blue  • alignment: 居中',
                style: TextStyle(fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildAlignmentDemo() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 200,
              height: 100,
              color: Colors.green,
              alignment: Alignment.bottomRight,
              child: const Text('右下对齐', style: TextStyle(color: Colors.white)),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8),
              child: Text(
                '对齐方式演示：• alignment: Alignment.bottomRight • 子组件相对于容器的对齐位置',
                style: TextStyle(fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDecorationDemo() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(16),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    blurRadius: 8,
                    offset: const Offset(4, 4),
                  ),
                ],
              ),
              child: const Center(
                child: Text('装饰效果', style: TextStyle(color: Colors.white)),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8),
              child: Text(
                '装饰属性配置：• borderRadius: 圆角16 • boxShadow: 阴影效果',
                style: TextStyle(fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPaddingMarginCompare() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Padding vs Margin 对比',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    Container(
                      color: Colors.grey[200],
                      child: Container(
                        width: 100,
                        height: 60,
                        color: Colors.blue,
                        padding: const EdgeInsets.all(16),
                        child: Container(color: Colors.white),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'padding: 内边距',
                        style: TextStyle(fontSize: 12),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Container(
                      color: Colors.grey[200],
                      padding: const EdgeInsets.all(16),
                      child: Container(
                        width: 100,
                        height: 60,
                        color: Colors.blue,
                        margin: const EdgeInsets.all(16),
                        child: Container(color: Colors.white),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'margin: 外边距',
                        style: TextStyle(fontSize: 12),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 12),
              child: Text(
                '关键区别：• padding：容器内边距，影响子组件布局位置    • margin：容器外边距，影响容器自身在父组件中的位置',
                style: TextStyle(fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildConstraintsDemo() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ConstrainedBox(
              constraints: const BoxConstraints(
                minWidth: 100,
                maxWidth: 200,
                minHeight: 50,
                maxHeight: 100,
              ),
              child: Container(
                color: Colors.purple,
                alignment: Alignment.center,
                child: const Text(
                  '约束条件示例',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8),
              child: Text(
                '约束条件配置： • minWidth: 100 • maxWidth: 200 • minHeight: 50 • maxHeight: 100',
                style: TextStyle(fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
